<template>
<div>
	<div class="bigtitle">
		<div class="bigtitle-title">收货地址</div>
		<span linkable right pdx2 @click="showCreateAddressModal=true">+添加新地址</span>
	</div>
	<Row :gutter="10">
		<Col v-for="(item, index) in items" :key="index" :xs="{ span: 24, offset: 0 }" :sm="{ span: 12, offset: 0 }" :md="{ span: 8, offset: 0 }" mgt2>
			<address-card :value="item" @on-update="handleGetAll"></address-card>
		</Col>
	</Row>
	<create-address v-model="showCreateAddressModal" @save-success="handleGetAll"></create-address>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../../lib/abpbase';
import AddressCard from './address-card.vue'
import CreateAddress from './create-address.vue'

@Component({
    components: { AddressCard, CreateAddress }
})
export default class Address extends AbpBase{
	showCreateAddressModal:boolean = false;
    get items(){
        return this.$store.state.address.items;
	}
	async handleGetAll(){
		await this.$store.dispatch('address/getAll');
	}
	async created(){
		await this.handleGetAll();
	}
}
</script>